<template>
  <div class="notice">
    <div class="head">
      <span>通知书打印</span>

      <span style="font-size: 16px; margin-left: 55px">类别：</span>
      <el-select v-model="jhlb" filterable placeholder="请选择" clearable>
        <el-option
          v-for="item in jhlbs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span style="font-size: 16px">省份：</span>
      <el-select v-model="sfmc" filterable placeholder="请选择" clearable>
        <el-option
          v-for="item in sfmcs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <!-- <el-radio-group v-model="radio" @change="handleChange">
        <el-radio :label="1">未打印</el-radio>
        <el-radio :label="2">已打印</el-radio>
        <el-radio :label="3">全部</el-radio>
      </el-radio-group> -->

      <button @click="query">查询</button>
      <button @click="print">打印</button>
    </div>

    <iframe
      :src="url(this.param)"
      ref="iframe"
      frameborder="0"
    ></iframe>

    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      highlight-current-row
      tooltip-effect="dark"
      height="720"
      border
      class="table"
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" width="100"> </el-table-column>
      <!-- <el-table-column type="index" label="序号" width="100"> </el-table-column> -->
      <el-table-column prop="sfdm" label="省份" width="240"> </el-table-column>
      <el-table-column prop="kldm" label="计划类别" width="360">
      </el-table-column>
      <el-table-column prop="ksh" label="考生号" width="360"> </el-table-column>
      <el-table-column prop="xm" label="姓名" width="240"> </el-table-column>
      <el-table-column prop="lqzy" label="专业"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "",
  data() {
    return {
      loading: false,
      radio: 3,
      jhlb: "",
      jhlbs: [
        {
          label: "理科普通类",
          value: "理科普通类",
        },
        {
          label: "文科普通类",
          value: "文科普通类",
        },
        {
          label: "高水平运动员",
          value: "高水平运动员",
        },
        {
          label: "预科",
          value: "预科",
        },
        {
          label: "民考民",
          value: "民考民",
        },
      ],
      sfmc: "",
      sfmcs: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "天津",
          label: "天津",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "重庆",
          label: "重庆",
        },
        {
          value: "河北",
          label: "河北",
        },
        {
          value: "山西",
          label: "山西",
        },
        {
          value: "辽宁",
          label: "辽宁",
        },
        {
          value: "吉林",
          label: "吉林",
        },
        {
          value: "黑龙江",
          label: "黑龙江",
        },
        {
          value: "江苏",
          label: "江苏",
        },
        {
          value: "浙江",
          label: "浙江",
        },
        {
          value: "安徽",
          label: "安徽",
        },
        {
          value: "福建",
          label: "福建",
        },
        {
          value: "江西",
          label: "江西",
        },
        {
          value: "山东",
          label: "山东",
        },
        {
          value: "河南",
          label: "河南",
        },
        {
          value: "湖北",
          label: "湖北",
        },
        {
          value: "湖南",
          label: "湖南",
        },
        {
          value: "广东",
          label: "广东",
        },
        {
          value: "海南",
          label: "海南",
        },
        {
          value: "四川",
          label: "四川",
        },
        {
          value: "贵州",
          label: "贵州",
        },
        {
          value: "云南",
          label: "云南",
        },
        {
          value: "陕西",
          label: "陕西",
        },
        {
          value: "甘肃",
          label: "甘肃",
        },
        {
          value: "青海",
          label: "青海",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "内蒙古",
          label: "内蒙古",
        },
        {
          value: "广西",
          label: "广西",
        },
        {
          value: "西藏",
          label: "西藏",
        },
        {
          value: "宁夏",
          label: "宁夏",
        },
        {
          value: "新疆",
          label: "新疆",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "澳门",
          label: "澳门",
        },
      ],
      tableData: [],
      selectData: [],
      name: [],
      param: '',
    };
  },
  methods: {
    url(val) {
      console.log(window.location.host);
      return "http://" + window.location.host + val;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectData = val;
    },
    query() {
      if (this.jhlb == "" && this.sfmc == "") {
        this.tableData = [];
      }
      if (this.jhlb != "" && this.sfmc != "") {
        this.loading = true;
        request({
          url: "http://118.31.51.131:8081/api/zsxt/fbgl/tzs",
          method: "post",
          data: {
            lb: this.jhlb,
            sfmc: this.sfmc,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          this.loading = false;
          console.log(value);
          this.tableData = value.data;
        });
      }
      if (this.jhlb == "" && this.sfmc != "") {
        this.loading = true;
        request({
          url: "http://118.31.51.131:8081/api/zsxt/fbgl/tzs",
          method: "post",
          data: {
            sfmc: this.sfmc,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          this.loading = false;
          console.log(value);
          this.tableData = value.data;
        });
      }
      if (this.jhlb != "" && this.sfmc == "") {
        this.loading = true;
        request({
          url: "http://118.31.51.131:8081/api/zsxt/fbgl/tzs",
          method: "post",
          data: {
            lb: this.jhlb,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          this.loading = false;
          console.log(value);
          this.tableData = value.data;
        });
      }
    },
    print() {
      if(this.selectData.length == 0) {
        return
      }

      this.name = []

      if(this.selectData.length != 0) {
        for(let i=0;i<this.selectData.length;i++) {
          this.name.push(this.selectData[i].xm)
        }
      }
      console.log(this.name);

      
      let htmls = ''

      for(let i=0;i<this.selectData.length;i++) {
        let name = this.name[i]
        let html = `<div class="print">
                    <div class="title">录取通知书</div>
                    <hr>
                    <br>
                    <div><span id="name">${name}</span>同学：</div>
                    <div class="content">经审核批准，您已被湖南大学录取，请凭本通知书报到。具体时间见《报到须知》</div>
                  </div>`;
        htmls+=html
      }

      console.log(htmls);

      this.$refs.iframe.contentWindow.document.body.innerHTML = htmls

      this.$refs.iframe.contentWindow.print();
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 1] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  created() {
    if(window.location.host == '175.27.165.25:8080') {
      this.param = '/dist/test.html'
    }else {
      this.param = '/test.html'
    }
  },
  components: {},
};
</script>

<style scoped>
iframe {
  display: none;
}
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
.head ::v-deep .el-input__inner {
  height: 35px;
}
.head .el-radio-group {
  margin-left: 50px;
}
.head button:nth-of-type(1) {
  margin-left: 525px;
}
.head button:nth-of-type(2) {
  margin-left: 100px;
}
button {
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
button:active {
  opacity: 0.8;
}
.notice ::v-deep .el-table .cell {
  text-align: center;
}
</style>